<% presenter = Users::DiscordAccountRequiredPresenter.new(self) %>
<% content_for(:head) do %>
  <title><%= t(".page_title") %></title>
<% end %>
<% content_for(:container) do %>
  <div class="flex flex-col items-stretch min-h-screen">
    <section class="flex grow bg-gray-50 items-center justify-center">
      <div class="container mx-auto p-4 max-w-4xl">
        <div class="flex items-center">
          <div class="py-4 md:py-0 md:mr-6 md:w-1/2">
            <% if current_user.discord_account_connected? %>
              <i class="text-green-600 text-7xl if i-badge-check-solid if-fw" ></i>
              <h1 class="mt-3 text-3xl font-bold"><%= t(".linked.heading") %></h1>
              <p class="mt-4"><%= t(".linked.description", school_name: current_school.name) %></p>
              <p class="mt-4"><%= t(".linked.footer_html", school_name: current_school.name) %></p>
              <% if @course_requiring_discord_account.present? %>
                <%= link_to curriculum_course_path(@course_requiring_discord_account), class: "btn btn-primary btn-large mt-4" do %>
                  <i class="if i-book-regular if-fw text-lg" ></i>
                  <span class="ml-2">
                    <%= t(".linked.go_to_course_button") %>
                  </span>
                <% end %>
              <% else %>
                <%= link_to dashboard_path, class: "btn btn-primary btn-large mt-4" do %>
                  <i class="if i-home-regular if-fw text-lg" ></i>
                  <span class="ml-2">
                    <%= t(".linked.go_to_dashboard_button") %>
                  </span>
                <% end %>
              <% end %>
            <% else %>
              <h1 class="text-3xl font-bold"><%= t(".unlinked.heading") %></h1>
              <p class="mt-2"><%= t(".unlinked.description", school_name: current_school.name) %></p>
              <section class="mt-4">
                <p class="font-semibold"><%= t(".unlinked.process.prefix") %></p>
                <div class="flex mt-4">
                  <span class="shrink-0 h-8 w-8 font-semibold border rounded-full border-transparent bg-green-100 text-green-600 flex items-center justify-center">
                    <%= t(".unlinked.process.step_1_label") %>
                  </span>
                  <span class="ml-3"><%= t(".unlinked.process.step_1_description_html") %></span>
                </div>
                <div class="flex mt-2">
                  <span class="shrink-0 h-8 w-8 font-semibold border rounded-full border-transparent bg-green-100 text-green-600 flex items-center justify-center">
                    <%= t(".unlinked.process.step_2_label") %>
                  </span>
                  <span class="ml-3">
                    <%= t(".unlinked.process.step_2_description_html") %>
                    <span data-re-component="HelpIcon" data-re-json='<%= {children: t(".unlinked.process.step_2_help_html"), className: 'text-xs', responsiveAlignment: 'rrc'}.to_json %>'></span>
                  </span>
                </div>
                <div class="flex mt-2">
                  <span class="shrink-0 h-8 w-8 font-semibold border rounded-full border-transparent bg-green-100 text-green-600 flex items-center justify-center">
                    <%= t(".unlinked.process.step_3_label") %>
                  </span>
                  <span class="ml-3"><%= t(".unlinked.process.step_3_description_html") %></span>
                </div>
              </section>
              <%= link_to presenter.discord_federated_login_url, class: 'btn btn-primary btn-large mt-4' do %>
                <i class="if i-discord if-fw text-lg"></i>
                <span class="ml-2">
                  <%= t(".unlinked.link_discord_button") %>
                </span>
              <% end %>
            <% end %>
          </div>
          <%= image_tag presenter.image_path, class: "hidden md:block md:ml-6 md:w-1/2" %>
        </div>
      </div>
    </section>
    <%= render 'layouts/footer_bottom', presenter: ::Layouts::FooterPresenter.new(self) %>
  </div>
<% end %>
